﻿.@using Peninsula.Site.Data.Models;
@model TotalYearModel
@section Scripts{
    <script src="~/js/echart/echarts.min.js"></script>
    @*这里写页面自定义脚本*@
    <script>
        $(function () {
            $('#clearDateKeyWord').click(function () {
                $('#DateKeyWord').val(""); // 清空日期
            });

            $(".form_datetime").datetimepicker({
                format: "yyyy",
                language: 'zh-CN',
                autoclose: true,
                todayBtn: true,
                initialDate: "2017-01-1 00:00",
                startView: 4,
                keyboardNavigation: true,
                minView:4

            });

        });
    </script>
}
<div class="portlet">
    <div class="portlet-title">
        <div class="caption">
            <i class="fa fa-reorder"></i>数量/收益统计
        </div>
    </div>
    <div class="portlet-body form">
        <form id="Total" class="form-horizontal js-form ">
            <div class="form-body ">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="col-md-3 control-label">
                                <span style="color:red">*</span> @Html.DisplayNameFor(m => m.DateKeyWord)
                            </label>
                            <div class="col-md-7">
                                <div class="input-group">
                                    @Html.TextBoxFor(m => m.DateKeyWord, new { @class = "form-control form_datetime date", @readonly = true,
                                   @placeholder = "请选择年份"
                               })
                                    <span class="input-group-btn">
                                        <button class="btn btn-success" type="button" id="clearDateKeyWord"><i class="fa fa-times"></i></button>
                                    </span>
                                    <div class="input-group-btn">
                                        <div class="row">
                                            <div class="col-md-offset-4 col-md-8">
                                                @*<button type="submit" class="btn btn-success" onclick="DrawECharts()">统计2</button>*@
                                                <input type="button"
                                                       class="btn btn-success" onclick="DrawECharts()" value="统计" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @Html.ValidationMessageFor(m => m.DateKeyWord)
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </form>


        <!-- END FORM -->
    </div>
</div>
<div class="portlet">
    <div class="portlet-title">
        <div class="caption">
            <i class="fa fa-reorder"></i>统计图表
        </div>
    </div>
    <div class="portlet-body">

        <div id="Statistic" style="height:400px"></div>

        <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('Statistic'));

        // 指定图表的配置项和数据

        var  option = {
            title: {
                text: '订单/钱款统计',

            },
            tooltip: {
                trigger: 'axis'
            },
           legend: {

               data: ['订单数量', '订单钱款']
            },
            toolbox: {          //左上角功能表
                show: true,
                feature: {
                    dataView: { show: true, readOnly: true },
                    magicType: { show: true, type: ['line', 'bar', 'stack'] },
                    restore: { show: true },
                    saveAsImage: { show: true },
                    mark:false
                }
            },
            calculable: true,
            xAxis: [//横轴
                {
                    name:['月份'],
                    type: 'category',
                    data: [],//['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                }
            ],
            yAxis: [//竖轴
                {
                    type: 'value',
                    splitArea:{show:true}
                 }
             ],
            series: [//系列（值）
             //    //{
             //    //    itemStyle:{
             //    //        normal: {color:'gray'}//改变颜色
             //    //    },
             //    //  name: [],
             //    //    type: 'bar',
             //    //    data: [],//[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
             //    //    markPoint: {
             //    //        data: [
             //    //            { type: 'max', name: '最大值' },
             //    //            { type: 'min', name: '最小值' }
             //    //        ]
             //    //    },
             //    //    markLine: {
             //    //        data: [
             //    //            { type: 'average', name: '平均值' }
             //    //        ]
             //    //    }
             //    //},
             ]
         };

         //使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)

        function DrawECharts() {
            var options = myChart.getOption();
            myChart.showLoading({
                text:"加载中。。。。。"
            });
            $.ajax({
                type: "POST",
                async:false, //同步执行 $("#Total").serialize(),
                data:{'dateKeyWord':$('#DateKeyWord').val()},
                url: "StoreTotal",
                dataType: "json", //返回数据形式为json
                success: function (result) {
                    if (result) {
                        if (result.Messages) {
                            alert("统计年份不能为空！");
                            return;
                        } else {
                            //将返回的category和series对象赋值给options对象内的category和series
                            //因为xAxis是一个数组 这里需要是xAxis[i]的形式
                            myChart.clear();
                            options.xAxis[0].data = result.listCatepory;
                            options.series = result.listSeries;
                            options.legend.data = result.listLegend;
                            myChart.hideLoading();
                            myChart.setOption(options);
                           
                        }

                    }
                },
                error: function (errorMsg) {
                    alert("加载失败！");
                }

            });
        }

        </script>

    </div>
</div>